<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <div class="left-box">小说阅读</div>
      </template>
      <template #right>
        <div class="home-text" @click="viewHome">首页</div>
      </template>
    </van-nav-bar>
    <div class="login-box">
      <div class="welcome-title">欢迎回来！</div>
      <div class="welcome-subtitle">Please login to your accounts</div>

      <div class="form-box">
        <van-form @submit="login">
          <van-field
            v-model="loginUserInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            autocomplete="off"
          />
          <van-field
            v-model="loginUserInfo.password"
            :type="!isOpenLogin ? 'password' : 'text'"
            name="密码"
            label="密码"
            placeholder="密码"
            :right-icon="!isOpenLogin ? 'closed-eye' : 'eye-o'"
            autocomplete="off"
            @click-right-icon="toggleLoginPasssword"
          />
          <div class="forgot">
            <div class="forgot-pwd">忘记密码？</div>
          </div>
          <div class="login-btn">
            <van-button round block color="#0C34BA" native-type="submit"
              >登录</van-button
            >
          </div>
          <div class="login-btn">
            <van-button round block type="default" @click="showPopup"
              >注册</van-button
            >
          </div>
        </van-form>
      </div>
    </div>

    <!-- 注册 -->
    <van-popup v-model="show" position="bottom" closeable>
      <div class="register-box">
        <div class="register-title">注册</div>
        <van-form @submit="register">
          <van-field
            v-model="registerUserInfo.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            autocomplete="off"
          />
          <van-field
            v-model="registerUserInfo.password"
            :type="!isOpenRegister ? 'password' : 'text'"
            name="密码"
            label="密码"
            placeholder="密码"
            :right-icon="!isOpenRegister ? 'closed-eye' : 'eye-o'"
            autocomplete="off"
            @click-right-icon="toggleResgiterPasssword"
          />
          <van-field
            v-model="registerUserInfo.nickName"
            type="text"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            autocomplete="off"
          />

          <div class="login-btn">
            <van-button round block color="#0C34BA" native-type="submit"
              >注册</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "login",
  data() {
    return {
      //是否显示注册弹窗
      show: false,
      loginUserInfo: {
        phone: "",
        password: "",
      },
      registerUserInfo: {
        phone: "",
        password: "",
        nickName: "",
      },

      //查看注册密码
      isOpenRegister: false,

      //查看登录密码
      isOpenLogin: false,
    };
  },

  methods: {
    showPopup() {
      this.show = !this.show;
    },
    //查看菜单
    viewHome() {
      this.$router.push({ name: "home" });
    },
    //切换注册密码可见状态
    toggleResgiterPasssword() {
      this.isOpenRegister = !this.isOpenRegister;
    },
    //切换登录密码可见状态
    toggleLoginPasssword() {
      this.isOpenLogin = !this.isOpenLogin;
    },
    //注册
    register() {
      let registerUserInfo = localStorage.getItem("registerUserInfo");
      if (!registerUserInfo) {
        registerUserInfo = [];
      } else {
        registerUserInfo = JSON.parse(registerUserInfo);
      }
      //判断是否存在重复的搜索关键字
      for (var i = 0; i < registerUserInfo.length; i++) {
        if (
          registerUserInfo[i].user.phone === this.registerUserInfo.phone &&
          registerUserInfo[i].user.password ===
            this.registerUserInfo.password &&
          registerUserInfo[i].user.nickName === this.registerUserInfo.nickName
        ) {
          Toast("账号已注册!");
          return;
        }
      }

      //如果为空则不添加
      if (
        this.registerUserInfo.phone === "" ||
        this.registerUserInfo.password === "" ||
        this.registerUserInfo.nickName === ""
      ) {
        Toast("输入框不能为空");
        return;
      }
      registerUserInfo.push({ user: this.registerUserInfo });
      Toast("账号注册成功");
      localStorage.setItem(
        "registerUserInfo",
        JSON.stringify(registerUserInfo)
      );
    },

    //登录
    login() {
      let loginUserInfo = localStorage.getItem("loginUserInfo");
      if (!loginUserInfo) {
        loginUserInfo = [];
      } else {
        loginUserInfo = JSON.parse(loginUserInfo);
      }
      //判断是否存在重复的搜索关键字
      for (var i = 0; i < loginUserInfo.length; i++) {
        if (
          loginUserInfo[i].user.phone === this.loginUserInfo.phone &&
          loginUserInfo[i].user.password === this.loginUserInfo.password
        ) {
          setTimeout(() => {
            this.$router.push({ name: "home" });
          }, 1000);
          Toast("登录成功!");
          return;
        }
      }

      let registerUserInfo = JSON.parse(
        localStorage.getItem("registerUserInfo")
      );

      registerUserInfo.forEach((v) => {
        if (this.loginUserInfo.phone === v.user.phone) {
          if (this.loginUserInfo.password === v.user.password) {
            setTimeout(() => {
              this.$router.push({ name: "home" });
            }, 1000);
            Toast("登录成功!");
            //登录成功后储存用户信息
            this.loginUserInfo.nickName = v.user.nickName;
            loginUserInfo.push({ user: this.loginUserInfo });
            // console.log("loginUserInfo==>", loginUserInfo);
            localStorage.setItem(
              "loginUserInfo",
              JSON.stringify(loginUserInfo)
            );
          } else {
            Toast("密码不对！");
          }
        } else {
          Toast("手机号码没注册过！");
        }
      });
      // this.axios({
      //   method: "post",
      //   url: "http://www.kangliuyong.com:10002/login",
      //   data: {
      //     ...this.loginUserInfo,
      //   },
      // })
      //   .then((result) => {
      //     console.log("result ==> ", result);
      //     this.$toast(result.data.msg);
      //     if (result.data.code === 200) {
      //       //将token保存到localStorage
      //       localStorage.setItem("token", result.data.token);
      //       setTimeout(() => {
      //         this.$router.push({ name: "home" });
      //       }, 1000);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log("err ==> ", err);
      //   });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  .register-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .register-box {
    padding: 10px;
  }
  .forgot {
    margin-top: 20px;
    display: flex;
  }
  .forgot-pwd {
    margin-left: auto;
    font-size: 14px;
    color: #666;
  }
  .login-btn {
    margin-top: 50px;
  }
  .form-box {
    margin-top: 50px;
  }
  .welcome-title {
    font-size: 30px;
  }
  .welcome-subtitle {
    font-size: 18px;
    margin-top: 20px;
    color: #999;
  }
  .login-box {
    margin-top: 80px;
    padding: 10px;
  }
  .home-text {
    color: #0c34ba;
    font-weight: bold;
    font-size: 14px;
  }
  .left-box {
    display: flex;
    align-items: center;
  }
  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
  }
  .logo-text {
    margin-left: 10px;
    font-weight: bold;
    font-size: 14px;
  }
}
</style>